<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>聊天</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="layui/css/layui.css">
  <!-- 引入组件库 -->
  <script src="layui/layui.all.js"></script>
  <script src="moment.min.js"></script>
  <script src="util.js"></script>
</head>
<body>
<div class="site-tips site-text">
  <span id="userName"></span>
  <select id="userStatus" onchange="setOnlineStatus(this.value)">
    <option value="1">在线</option>
    <option value="2">隐身</option>
    <option value="0">离线</option>
  </select>
</div>
<div style="width: 100%;height: auto;" id="chatContent">

</div>
<script id="chatMain" type="text/html">
  <fieldset class="layui-elem-field layui-field-title">
    <legend>{{d.message}} <span id="status{{d.type+d.id}}"></span></legend>
    <div style="width: 100%;height: 110px;overflow: auto">
      <table width="100%" id="content{{d.type+d.id}}">
        <tr>
          <td width="40%"></td>
          <td width="60%"></td>
        </tr>
      </table>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">输入内容</label>
      <div class="layui-input-block">
        <input type="text" onkeyup="if(event.keyCode == 13)sendMessage('{{d.type}}','{{d.id}}');"
               id="text{{d.type+d.id}}" placeholder="请输入内容" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" onclick="sendMessage('{{d.type}}','{{d.id}}')">发送</button>
        <button class="layui-btn layui-btn-primary" onclick="getChatLog('{{d.type}}','{{d.id}}')">聊天记录</button>
      </div>
    </div>
  </fieldset>
</script>
<script id="trContent" type="text/html">
  <tr style="color: {{d.isMe?'black':'green'}}">
    <td align="right">{{'['+formatTime(d.timeStamp)+']'}}{{d.name}}:&nbsp;&nbsp;</td>
    <td>{{d.content}}</td>
  </tr>
</script>

<script>
  var $ = layui.jquery, layer = layui.layer, laytpl = layui.laytpl;
  var chatMainHtml = chatMain.innerHTML;
  var trHtml = trContent.innerHTML;
  var user = parent[getUrlParameter("user")];
  function init() {
    if (user && user.id) {
      $("#userName").html(user.name);
      var allFriends = parent.listFriends.filter(function (fr) {
        return fr.id != user.id;
      });
      allFriends = JSON.parse(JSON.stringify(allFriends));
      allFriends.forEach(function (friend) {
        friend.setFriendStatus = function (id, onlineStatus) {
          if (friend.id == id) {
            $("#statusFriend" + id).text("[" + onlineStatus + "]");
          }
        };
        friend.getMessage = function (mes) {
          $("#contentFriend" + mes.id).append(laytpl(trHtml).render(mes));
        }
      });
      var groups = JSON.parse(JSON.stringify(parent.groups));
      groups.forEach(function (group) {
        group.getMessage = function (mes) {
          $("#contentGroup" + mes.id).append(laytpl(trHtml).render(mes));
        }
      });
      if (websocketTool) {
        websocketTool.notOnlineEvent = function () {
          layer.msg("已离线");
          $("#userStatus").val("0");
          allFriends.forEach(function (friend) {
            $("#statusFriend" + id).text("");
          });
        };
        websocketTool.init(user, allFriends, groups);
      }
      allFriends.forEach(function (fr) {
        $("#chatContent").append(laytpl(chatMainHtml).render({
          message: "与" + fr.name + "的聊天",
          type: "Friend",
          id: fr.id
        }));
      });
      groups.forEach(function (group) {
        $("#chatContent").append(laytpl(chatMainHtml).render({message: group.name, type: "Group", id: group.id}));
      });
    } else {
      layer.alert("访问出错！！！！！！");
    }
  }
  init();

  function sendMessage(type, sendId) {
    var content = $("#text" + type + sendId).val().replace(/[\r\n]/g, "");
    if (websocketTool && websocketTool.onlineStatus == 1) {
      var tp = type == "Group" ? 1 : 0;
      var sendName = type == "Group" ? websocketTool.groupMap[sendId].name : websocketTool.userInfoMap[sendId].name;
      var message = {
        userId: websocketTool.user.id,
        userName: websocketTool.user.name,
        type: tp,
        content: content,
        sendId: sendId,
        sendName: sendName
      };
      websocketTool.sendMessage(message);
      $("#content" + type + sendId).append(laytpl(trHtml).render({
        content: content,
        name: websocketTool.user.name,
        isMe: true
      }));
      $("#text" + type + sendId).val("");
    } else {
      $("#text" + type + sendId).val(content);
      layer.msg("已离线，发送失败！");
    }
  }

  function getChatLog(type, sendId) {
    var url = "chatlog.html?type=" + type + "&sendId=" + sendId + "&userId=" + user.id;
    parent.layer.open({
      type: 2,
      title: '聊天记录',
      shadeClose: true,
      shade: 0.8,
      area: ['50%', '50%'],
      content: url //iframe的url
    });
  }

  function setOnlineStatus(value) {
    if (websocketTool) {
      websocketTool.setOnlineStatus(value);
    }
  }

</script>
</body>
</html>